<template>
	<div class="container">
		<el-row>
			<el-col :span="24">
				<yd-form
					v-if="isForm"
					ref="myForm"
					:options="formOptions"
					:model="state.params"
					@change="handlerSelectChange"
					@formInit="handlerFormInit"
					@search="handlerFormInit"
				>
					<template #form-btn>
						<div>
							<el-button class="yd-form-btn" type="primary" @click="loadData()">查询</el-button>
						</div>
					</template>
				</yd-form>
			</el-col>
			<el-col :span="24">
				<YdTable
					:formData="state.params"
					:tableConfig="tableConfig"
					:tableData="dataList"
					@sizeChangeHandler="loadData()"
					@currentChangeHandler="loadData()"
					@sortChangeHandler="loadData()"
				></YdTable>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="overview-details">
import { useDataTable } from '@/hooks';
import { onActivated, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { overviewDetailList } from '@/api/middle-monitor/overview';
import { useRoute, useRouter, RouteLocationNormalized } from 'vue-router';
import { publicValue } from '@/api/search/searchOptions';
import { calculateTimeBefore, getDefaultDate } from '@/utils/common';

const router = useRouter();
const route: RouteLocationNormalized = useRoute();
const { dataList, pageConfig, initData, loadData } = useDataTable();
const state = reactive({
	params: {
		startTime: '',
		endTime: '',
		orgName: '' as string | undefined,
		orgTypeArr: [] as string[],
		pageNum: 1,
		pageSize: 10,
		value: [] as string[],
	},
	businessStatus: '',
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '单位属性',
		prop: 'value',
		selectKey: 'value',
		selectLabel: 'label',
		attrs: {
			multiple: true, // 全选multiple: true, // 全选
		},
		isAllOrSingle: true, // 是否只支持全选且只可单选不可多选
		api: { name: 'page', params: { isRecords: true } },
	},
	{
		type: 'input',
		label: '单位名称',
		prop: 'orgName',
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		dateType: 'datetimerange',
		enableCrossDay: true,
		span: 10,
		// shortcutsKeys: ['last1h', 'today', 'lastDay'],
		defaulShortcutsKey: 'today', // 设置当天时间
	},
]);
// 列表配置
const tableConfig = reactive<TableConfigType>({
	// remote: overviewDetailList,
	columns: [
		{
			label: '单位属性',
			prop: 'orgTypeName',
		},
		{
			label: '单位名称',
			prop: 'orgName',
		},
		{
			label: '能力数',
			prop: 'totalAbilityCount',
			operation: [
				{
					rowKey: 'totalAbilityCount',
					color: '#ff9a0c',
					handler: (scope) => {
						state.businessStatus = '能力数';
						jumpPageClick(scope.row);
					},
				},
			],
		},
		{
			label: '异常能力数',
			prop: 'abnormalAbilityCount',
			operation: [
				{
					rowKey: 'abnormalAbilityCount',
					color: 'red',
					handler: (scope) => {
						state.businessStatus = '异常能力数';
						jumpPageClick(scope.row);
					},
				},
			],
		},
		{
			label: '告警数',
			prop: 'alarmCount',
			operation: [
				{
					rowKey: 'alarmCount',
					color: '#ff9a0c',
					handler: (scope) => {
						state.businessStatus = '告警数';
						jumpPageClick(scope.row);
					},
				},
			],
		},
	],
	pagination: {
		pageNum: 1,
		pageSize: 10,
		// orderByColumn: 'alarmTriggerTime',
		// isAsc: 'desc',
	},
	loading: false,
});

// emit
/**\
 * 行数据点击
 */
function jumpPageClick(row?: any) {
	let obj = {
		startTime: state.params.startTime,
		endTime: state.params.endTime,
		orgCode: row.orgCode, // 单位编码
	};
	if (state.businessStatus === '能力数' || state.businessStatus === '异常能力数') {
		router.push({
			path: '/middle-monitor/unit-ability-overview/index',
			query: {
				...obj,
			},
		});
	} else if (state.businessStatus === '告警数') {
		router.push({
			path: '/middle-monitor/alarm-query/index',
			query: {
				orgName: row.orgName,
				...obj,
			},
		});
	}
}

let isForm = ref(false);
async function publicValueFn() {
	let res = await publicValue();
	let minutes = res.data || 5;
	isForm.value = true;
	state.params.endTime = calculateTimeBefore(minutes, state.params.endTime);
	state.params.startTime = calculateTimeBefore(minutes, state.params.startTime, 'day');
}
onBeforeMount(() => {
	// publicValueFn();
});
onActivated(() => {
	isForm.value = false;
	publicValueFn();
});
/**
 * 下拉框change
 */
function handlerSelectChange(options: BaseOptionType, value: any) {
	state.params.orgTypeArr = state.params.value;
	loadData();
}
// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		for (let key in query) {
			if (Array.isArray(formData[key])) {
				formData[key] = [];
				formData['value'] = [];
				if (query[key]) {
					formData[key].push(query[key]);
					formData['value'].push(query[key] || query['orgType']);
				}
			} else {
				formData[key] = query[key];
			}
		}
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
	if (formData.systemId) {
		formData.systemId += '';
	}
}
/**
 * 表单初始化数据
 */
async function handlerFormInit() {
	initQuery(route.query, state.params);
	initData(overviewDetailList, state.params);
}
// async function handlerFormInit(options: BaseOptionType, row: any) {
// 	console.log(options, row, 'llllll');

// 	let orgName = (route.query.orgName as string | undefined) || '';
// 	let orgType = route.query.orgType || '';
// 	if (route.query.code) {
// 		let code = route.query.code;
// 		state.params.value.push(code);
// 	}
// 	// row[0].children?.forEach((items: any) => {
// 	// 	if (items.label === orgName || items.value === orgType) {
// 	// 		state.params.value.push(items.value);
// 	// 	}
// 	// });
// 	// state.params.orgTypeArr = state.params.value;
// 	// if (orgType) {
// 	// 	state.params.orgName = orgName;
// 	// }
// 	await publicValueFn();
// 	initData(overviewDetailList, state.params);
// }

onMounted(() => {});
watch(
	() => pageConfig,
	(newVal) => {
		tableConfig.pagination!.total = newVal.total;
	},
	{ deep: true }
);
</script>

<style scoped lang="scss"></style>
